<!--
 * 自我介绍
 * @Author: John Trump
 * @Date: 2020-07-14 11:14:11
 * @LastEditors: John Trump
 * @LastEditTime: 2020-07-14 18:42:23
 * @FilePath: /src/views/introduction/index.vue
-->

<template>
  <div>
    <Robot :robotsay="Rsay"></Robot>
    <div>
      <div class="features">
        <mu-row gutter>
          <mu-col span="4">
            <img @click="jumpto()" src="../../assets/images/intro_1.png" alt="饮食" />
          </mu-col>
          <mu-col span="4">
            <img @click="jumpto()" src="../../assets/images/intro_2.png" alt="体征" />
          </mu-col>
          <mu-col span="4">
            <img @click="jumpto()" src="../../assets/images/intro_3.png" alt="运动" />
          </mu-col>
        </mu-row>
        <mu-row gutter>
          <mu-col span="4">
            <img @click="jumpto()" src="../../assets/images/intro_4.png" alt="行为" />
          </mu-col>
          <mu-col span="4">
            <img @click="jumpto()" src="../../assets/images/intro_5.png" alt="心情" />
          </mu-col>
          <mu-col span="4">
            <img @click="jumpto()" src="../../assets/images/intro_6.png" alt="其他" />
          </mu-col>
        </mu-row>
      </div>

      <!-- 登录button -->
      <mu-button @click="handleLogin" class="login-button" color="success" round ripple>去登录</mu-button>
    </div>
  </div>
</template>

<script>
import Robot from "../../components/Robot";

export default {
  data() {
    return {
      Rsay: "我将通过以下方面持续关注您的健康情况，请您先登录。"
    };
  },
  methods: {
    /** TODO: 跳转到target */
    jumpto(target) {
      console.log("jumpto", target);
    },
    async handleLogin() {
      const res = await this.$store.dispatch("LoginByPhone", {});
      console.log(this.$store.state.user);
      debugger;
      this.$router.push({ path: "/" });
    }
  },
  components: {
    Robot
  }
};
</script>

<style lang="less" scoped>
.login-button {
  width: 32%;
  height: 100px;
  background: linear-gradient(
    180deg,
    rgba(129, 231, 180, 1),
    rgba(51, 203, 152, 1)
  );
  box-shadow: 0px 6px 20px 0px rgba(51, 203, 152, 0.5);
  border-radius: 100px;
  font-size: 40px;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
}

.features {
  margin: 40px 60px;
  .row {
    margin-bottom: 40px;
  }
  img {
    width: 100%;
    &:active {
      opacity: 0.9;
    }
  }
}
</style>
